<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        *{padding: 0;margin: 0;}
        body{font-family: "微软雅黑";font-size: 16px;}
        .box{
            width: 600px;
            margin: 200px auto;
            position: relative;
        }
        .box input{
            font-weight: normal;
            font-size: 16px;
            height: 38px;
            line-height: 38px;
            border: 1px solid #ccc;
            cursor: pointer;
            width: 260px;
            box-shadow: 0 0 3px #aaa;
            text-indent: 15px;
            position: relative;
            font-family: "微软雅黑";
            background: #fff url("images/a2.jpg") no-repeat scroll right center;
        }
        ul{
            border: 1px solid #ccc;
            border-top: 0;
            box-shadow: 0 0 3px #aaa;
            line-height: 38px;
            width: 260px;
            position: absolute;
            top: 38px;
            background: #fff;
            list-style: none;
            text-indent: 15px;
            display: none;
        }
        ul li{
            cursor: pointer;
        }
        li:hover{
            background: #aaa;
        }
    </style>
</head>
<body>
<div class="box">
    <input value="==相关链接==" readonly="readonly" type="text" />
    <ul>
        <li data-value="1">相关链接1</li>
        <li data-value="2">相关链接2</li>
        <li data-value="3">相关链接3</li>
        <li data-value="4">相关链接4</li>
    </ul>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function(){
        $(".box").bind({
            "mouseenter":function(){
                $(this).find("ul").show()
            },
            "mouseleave":function(){
                $(this).find("ul").hide()
            },
            "click":function(event){
                if (event.target.tagName == "LI") {
                    $(this).find("input").val($(event.target).text()); //传具体的文字
                    //        $(this).find("input").val($(event.target).attr("data-value"));  传属性值
                }
                $(this).find("ul").hide();
            }
        })
    })
</script>
</body>
</html>
